 //获取dom
 var one = document.getElementById('one')
 var two = document.getElementById('two')

 var oneLis = one.getElementsByTagName('li')
 var twoLis = two.getElementsByTagName('li')

 var num = 0;

 var a = 0;

 var timer = setInterval(fun, 2000)

 //遍历添加事件
 for (var i = 0;i < oneLis.length;i++){

     //将每一个导航节点添加一个num
     oneLis[i].num = i;

     oneLis[i].onmouseover = function() {

         //清空
         clearInterval(timer)


         num = this.num
         //遍历所有的导航节点去除样式
         for (var j = 0;j < oneLis.length;j++){
             oneLis[j].style.backgroundColor = 'orange';
         }

         //让当前所在的导航改变样式
         this.style.backgroundColor = '#f00';

         //遍历轮播图部分
         for (var k = 0;k < oneLis.length;k++){

             if (k == num){
                 twoLis[num].style.display = "block";
             }else{
                 twoLis[k].style.display = 'none';
             }

         }
     }
      //鼠标移出
      oneLis[i].onmouseout = function(){
         //让a 和 num 同步
         a = num
         timer = null;
         timer = setInterval(fun, 2000)
     }
 }

 function fun() {
     //将所有导航初始化颜色
     console.log(a);
     for (var j = 0;j < oneLis.length; j++){
         oneLis[j].style.backgroundColor = 'orange'
     }

     //图片轮播
     for (var i = 0;i < twoLis.length;i++){
         if(i === a){
             twoLis[a].style.display = 'block'
         }else {
             twoLis[i].style.display = 'none'
         }
     }

     oneLis[a].style.backgroundColor = 'red'

     a = a + 1;

     if(a % oneLis.length == 0 ){
         a = 0;
     }

    
    
 }
